
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style>
			#barraProgreso{
				width: 200px;
				height: 15px;
				border: 1px solid #a31a1a;
			}
			
			#progreso{
				height: 15px;
				width: 100%;
				font-size: 10px;
				text-align: center;
				
				background-image: url(bgPBar200.gif);
				background-repeat: no-repeat;
				background-position: -100px 0;
			}
		</style>
	</head>
	<body>
		<div id="barraProgreso">
			<div id="progreso">50%</div>
		</div>
	</body>
	<script type="text/javascript">
		var avance = 0;
		function avanza(){
			var progreso = document.getElementById("progreso");
			progreso.style.backgroundPosition = (-200 + avance*2) + "px 0";
			progreso.innerHTML = avance + "%";
			avance++;
			if(avance<=100){
				setTimeout("avanza()", 250);
			}
		}
		window.onload = function(){
			avanza();
		}
	</script>
</html>